<script setup lang="ts" name="SystemRole">
import { getPageList, deleteById } from '@/api/system/user'
import { useTablePage } from '@/hooks/useTablePage'
import { Plus, Search, RefreshRight } from "@element-plus/icons-vue"

const Pagination = defineAsyncComponent(() => import('@/components/Pagination/Pagination.vue'))
const UserEdit = defineAsyncComponent(() => import('./components/UserEdit.vue'))

/**
 * 表格参数
 */
const {
  tabRef,
  pageTypes,
  queryFormRef,
  editRef,
  loading, query, tableList,
  queryData,
  handleRefresh,
  handleQuery,
  resetForm,
  handleDelete,
  handleEdit,
  handleAdd,
} = useTablePage<SysUserType, SysUserQuery>({ getPageList, deleteById })

</script>

<template>
  <div class="h-full w-full flex flex-col">
    <div class="h-50px w-full border border-solid bg-#fff border-[#ddd] rounded-2 p-8px">
      <div class="h-full w-full flex items-center">
        <el-form inline :model="query" ref="queryFormRef" class="h-full">
          <el-form-item label="用户名称" prop="username">
            <el-input v-model="query.username" maxlength="30" placeholder="请输入用户名称" class="w200px" clearable />
          </el-form-item>
          <el-form-item class="ml-20px">
            <el-button class="search-btn" :icon="Search" @click="handleQuery()">查 询</el-button>
            <el-button class="reset-btn" :icon="RefreshRight" @click="resetForm(queryFormRef)">重 置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="h-[calc(100%-60px)] w-full border border-solid bg-#fff border-[#ddd] rounded-2 mt-10px px-10px">
      <div class="h-50px w-full py-10px flex items-center justify-between">
        <el-button class="tab-func-btn" :icon="Plus" @click="handleAdd()">新 增</el-button>
        <el-tooltip effect="dark" content="刷新" placement="top">
          <el-icon class="mr-50px cursor-pointer transition ease-in-out delay-100 hover:scale-130 duration-10"
            :size="20" @click="handleRefresh">
            <Refresh />
          </el-icon>
        </el-tooltip>
      </div>
      <el-table class="table-con h-[calc(100%-104px)]" ref="tabRef" v-loading="loading" element-loading-text="正在加载中..."
        :data="tableList" stripe :header-cell-style="{ backgroundColor: '#F2F3F5' }">
        <el-table-column fixed="left" align="center" prop="nickName" label="用户昵称" width="110" />
        <el-table-column align="center" prop="username" label="用户帐号" width="140" />
        <el-table-column align="center" prop="mobile" label="手机号" width="120" />
        <el-table-column align="center" prop="email" label="邮箱" min-width="160" />
        <el-table-column align="center" prop="roleIds" label="角色" min-width="160">
          <template #default="{ row }">
            <el-tag type="info" class="ml3px" v-for="item in row.rolesNames">
              <span>
                {{ item }}
              </span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="deptIds" label="所在部门" min-width="150">
          <template #default="{ row }">
            <el-tag type="info" class="ml3px" v-for="item in row.deptNames">
              {{ item }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="帐号锁定">
          <template #default="{ row }">
            <el-tag :type="row.accountNonLocked ? 'success' : 'danger'">
              {{ row.accountNonLocked ? '正常' : '锁定' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="帐号过期">
          <template #default="{ row }">
            <el-tag :type="row.accountNonExpired ? 'success' : 'danger'">
              {{ row.accountNonExpired ? '正常' : '过期' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" sortable prop="createTime" label="创建时间" width="160" />
        <el-table-column fixed="right" align="center" label="操作" width="160">
          <template #default="{ row }">
            <el-button @click.stop="handleEdit(row)" type="warning" link>修改</el-button>
            <el-popconfirm @confirm="handleDelete(row.id)" width="auto" :title="`确定永久删除【${row.nickName}】吗？`">
              <template #reference>
                <el-button type="danger" link>删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :page="pageTypes" @pageChange="queryData"></Pagination>
    </div>
    <UserEdit ref="editRef" @refresh="queryData" />
  </div>
</template>

<style scoped></style>